<template>
  <a-card :bordered="false" title="">
    <a-form-model
      class="mt-6"
      ref="form"
      v-bind="{
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      }"
    >
      <a-form-model-item label="用户名">
        {{ user.username }}
      </a-form-model-item>

      <a-form-model-item label="商户号">
        {{ code }}
      </a-form-model-item>

      <a-form-model-item label="可用FCB">
        {{ user.coins }}
      </a-form-model-item>

      <a-form-model-item label="下发手续费">
        {{ user.tip }} / 笔
      </a-form-model-item>

      <a-form-model-item label="买币手续费">
        {{ user.fee_ratio * 1000 }} ‰ / 笔
      </a-form-model-item>

      <a-form-model-item label="上次登录IP">
        {{ user.login_ip }}
      </a-form-model-item>

      <a-form-model-item label="上次登录时间">
        {{ user.login_at }}
      </a-form-model-item>

      <a-form-model-item label="注册时间">
        {{ user.created_at }}
      </a-form-model-item>

      <div v-if="api_switch != 0">
        <edit-input
          v-if="!user.pid"
          v-model="user.notify_url"
          @on-edit="editUrl"
          ref="url"
        />

        <!-- <a-form-model-item label="回调地址">
        {{ user.notify_url }}
      </a-form-model-item> -->
        <a-form-model-item v-if="!user.pid" label="API TOKEN">
          <span>
            {{ token }}
          </span>
          <a-button type="link" @click="toggleView">
            {{ star ? '查看' : '隐藏' }}
          </a-button>
          <a-button type="link" @click="generateToken"> 重置 </a-button>
        </a-form-model-item>

        <whitelist
          v-if="!user.pid"
          @edit-whitelist="editWhitelist"
          ref="whitelist"
        />
      </div>
    </a-form-model>
    <modal-auth
      v-if="api_switch != 0"
      ref="auth"
      @password-checked="pass = true"
    />
  </a-card>
</template>

<script>
import whitelist from './whitelist.vue'
import editInput from './edit-input.vue'
import modalAuth from './modal-auth.vue'
export default {
  components: { whitelist, editInput, modalAuth },
  computed: {
    user() {
      return this.$store.state.account.user
    },
  },
  data() {
    return {
      token: '',
      api_token: '',
      code: '',
      star: true,
      pass: false,
      act: '',
      api_switch: '0',
    }
  },
  created() {
    this.axios.get('/profile-info').then((res) => {
      const { api_switch, api_token, code } = res.data.data
      this.api_switch = api_switch
      this.api_token = api_token
      this.code = code
      this.token = this.starToken()
    })
  },
  methods: {
    toggleView() {
      if (!this.star) {
        this.star = true
        this.token = this.starToken()
        return
      }
      if (this.pass) {
        this.star = false
        this.token = this.user.api_token
        return
      }
      this.act = 'view-password'
      this.$refs.auth.open()
    },
    starToken() {
      const token = this.api_token
      const stars = '*'.repeat(token.length - 16)
      return token.replace(/^(\w{8}).+(\w{8})$/, `$1${stars}$2`)
    },
    generateToken() {
      if (this.pass) {
        this.getToken()
      } else {
        this.act = 'generate-token'
        this.$refs.auth.open()
      }
    },
    getToken() {
      this.axios.get('/s/api-token/generate').then((res) => {
        this.$message.success('已重置')
        this.api_token = res.data.data
        this.token = this.star ? this.starToken() : this.api_token
      })
    },
    editWhitelist() {
      if (this.pass) {
        this.$refs.whitelist.editable = true
      } else {
        this.act = 'edit-whitelist'
        this.$refs.auth.open()
      }
    },
    editUrl() {
      if (this.pass) {
        this.$refs.url.editable = true
      } else {
        this.act = 'edit-url'
        this.$refs.auth.open()
      }
    },
  },
  watch: {
    pass(val) {
      if (!val) {
        return
      }
      if (this.act === 'view-password') {
        this.star = false
        this.token = this.api_token
      }

      if (this.act === 'generate-token') {
        this.getToken()
      }

      if (this.act === 'edit-whitelist') {
        this.$refs.whitelist.editable = true
      }

      if (this.act === 'edit-url') {
        this.$refs.url.editable = true
      }
    },
  },
}
</script>

<style>
</style>